<template>
  <div class="app-container">
    <div class="topform">
      <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
        <el-form-item label="用户名：" style="width:220px;float: left">
          <el-input style="width: 150px" clearable v-model="form.username" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话：" style="width: 220px;float: left">
          <el-input style="width: 150px" clearable v-model="form.tel" placeholder="请输入电话" autocomplete="off" />
        </el-form-item>
        <el-button type="primary" style="margin-left: 40px" @click="getlistdata(true)" icon="el-icon-search">搜索
        </el-button>
      </el-form>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
      header-cell-class-name="tableheader">
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template slot-scope="scope">
          {{ scope.row.tel   }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="拥有角色列表" :visible.sync="dialog" width="35%">
      <div style="margin-bottom:10px">
        <el-button style="float:right;margin-bottom:10px" type="primary" @click="addtype">添加</el-button>
      </div>
      <el-table v-loading="listLoading" element-loading-text="Loading" :data="rolelist" border fit highlight-current-row
        header-cell-class-name="tableheader">
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="delbtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 全部弹出层 -->
      <el-dialog title="所有角色" style="margin-top:5%;" width="35%" :visible.sync="innerdialog" append-to-body>
        <div style="display:flex">
          <div>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div style="margin-left:30px">
            <el-button type="primary" @click="confirmbtn">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
    <div class="pagination">
      <el-pagination style="text-align: center" layout="prev, pager, next" small :current-page="form.page"
        :page-size="form.pagesize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script type="es6">
export default {
  data() {
    return {
      form: {
        username: "",
        tel: "",
        page: 1,
        pagesize: 20,
      },
      options: [], //全部角色列表
      value: "", //选中的角色id
      ueser_id: "", //选中的id
      rolelist: [], //个人角色列表
      list: [],
      total: 0,
      listLoading: false,
      dialog: false,
      innerdialog: false, //内层弹窗
    };
  },
  created() {},
  methods: {
    //获取用户数据
    getlistdata(isquery) {
      if (isquery === true) {
        this.form.page = 1;
      }
      this.listLoading = true;
      this.$post(this.$api + "/get_userrole_list", {
        username: this.form.username,
        tel: this.form.tel,
        page: this.form.page,
        pagesize: this.form.pagesize,
      }).then((res) => {
        this.listLoading = false;
        if (res.code === 0) {
          this.list = res.rows;
          this.total = res.total;
        } else {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 添加角色
    addtype() {
      this.innerdialog = true;
      this.listLoading = true;
      this.$get(this.$api + "/get_all_roles").then((res) => {
        if (res.code === 0) {
          this.listLoading = false;
          this.options = res.data;
        } else {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 获得个人角色列表
    getpersonlist() {
      this.$get(this.$api + "/get_user_list", {
        user_id: this.user_id,
      }).then((res) => {
        this.listLoading = false;
        if (res.code === 0) {
          this.rolelist = res.data;
          this.dialog = true;
        } else {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    //打开编辑弹框
    openedit(item) {
      this.user_id = item.id;
      this.listLoading = true;
      this.getpersonlist();
    },
    // 确认添加按钮
    confirmbtn() {
      this.$get(this.$api + "/add_userrole", {
        user_id: this.user_id,
        role_id: this.value,
      }).then((res) => {
        if (res.code === 0) {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });
          this.innerdialog = false;
          this.getpersonlist();
        } else {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "error",
          });
        }
        this.value = "";
      });
    },
    //删除
    delbtn(item) {
      this.$confirm("确认删除？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.listLoading = true;
        this.$get(this.$api + "/delete_userrole", {
          user_id: this.user_id,
          role_id: item.role_id,
        }).then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });
            this.getpersonlist();
          } else {
            this.$notify({
              title: "失败",
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    handleSizeChange(v) {
      this.form.pagesize = v;
      this.getlistdata();
    },
    handleCurrentChange(v) {
      this.form.page = v;
      this.getlistdata();
    },
  },
};
</script>
